<template>
  <div id="viewQuestionView">
    <a-row :gutter="20">
      <a-col :md="10" :xs="24">
        <a-list max-height="75vh">
          <a-card v-if="quesion" :title="quesion.title">
            <a-descriptions title="判题条件" :column="{ xs: 1, md: 2, lg: 3 }">
              <a-descriptions-item label="时间限制">
                {{ quesion.judgeConfig.timeLimit ?? 1000 }}ms
              </a-descriptions-item>
              <a-descriptions-item label="内存限制">
                {{
                  (quesion.judgeConfig.memoryLimit / 1024).toFixed(1) ?? 1000
                }}KB
              </a-descriptions-item>
              <a-descriptions-item label="堆栈限制">
                {{ quesion.judgeConfig.stackLimit ?? 1000 }}KB
              </a-descriptions-item>
            </a-descriptions>
            <a-divider />
            <MDViewer :value="quesion.content || ''" />
            <template #extra>
              <a-space wrap>
                <a-tag
                  v-for="(item, index) of quesion.tags"
                  :key="index"
                  color="green"
                >
                  {{ item }}
                </a-tag>
              </a-space>
            </template>
          </a-card>
        </a-list>
      </a-col>
      <a-col :md="14">
        <a-form :model="form" layout="inline">
          <a-form-item field="language" label="语言" style="min-width: 250px">
            <a-select v-model="form.language" placeholder="请选择变成语言">
              <a-option v-for="(language, item) of languages" :key="item">
                {{ language }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <CodeEditor
          :language="form.language"
          :value="form.code"
          :handle-change="codeChange"
          class="code-editor"
        />
      </a-col>
      <a-col :md="12" offset="10">
        <a-button
          class="submitCode"
          @click="doSubmit"
          status="success"
          style="min-width: 300px"
        >
          提交代码
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref, withDefaults } from "vue";
import {
  QuestionControllerService,
  QuestionSubmitAddRequest,
  QuestionSubmitControllerService,
  QuestionVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MDViewer from "@/components/MDViewer.vue";
import { useRouter } from "vue-router";
import { languages } from "@/language/language";

const router = useRouter();

interface Props {
  id: number;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => 0,
});
const quesion = ref<QuestionVO>();

//可选编程语言
const form = ref<QuestionSubmitAddRequest>({
  language: "java",
  code: "",
  questionId: props.id,
});
//获取题目信息
const loadData = async () => {
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(
    props.id
  );
  if (res.code === 0) {
    quesion.value = res.data;
  } else {
    message.error("加载失败：" + res.message);
  }
};
//页面加载时出发
onMounted(() => {
  loadData();
});
//提交答案
const doSubmit = async () => {
  const res = await QuestionSubmitControllerService.doSubmitQuestionUsingPost(
    form.value
  );
  if (res.code === 0) {
    message.success("提交成功");
    router.push("/");
  } else {
    message.success("提交失败：" + res.message);
  }
};
//编辑器代码更新
const codeChange = (code: string) => {
  form.value.code = code;
};
</script>
<style scoped>
#viewQuestionView {
  padding: 0 20px;
}

.code-editor {
  min-width: 800px;
  min-height: 70vh;
}

.submitCode {
  margin-top: 20px;
  min-width: 150px;
}
</style>
